import { RepoLink } from 'libframe-docs/components/RepoLink'

> **What are active links?** It's the practice of visually highlighting the currently selected page in the navigation.
> For example, we can see this page `Active Links` highlighted in gray in the navigation on the left of this website; the link in the navigation pointing to this page is said to be "active".

To implement active links we:
 - Implement a custom `<Link>` component.
 - Make [`pageContext.urlPathname`](/pageContext) available to the `<Link>` component, see [Access `pageContext` anywhere](/pageContext-anywhere).

Our `<Link>` component can then check whether the link is active with `const isActive = a.href === pageContext.urlPathname`
and add a CSS class `<a class="is-active">` accordingly.

React example:
 - <RepoLink path='/boilerplates/boilerplate-react/renderer/Link.jsx' />

Vue example:
 - <RepoLink path='/boilerplates/boilerplate-vue/renderer/Link.vue' />

> Unless we [render our page as SPA](/SPA-vs-SSR-vs-HTML)
> we cannot use `window.location.pathname` as it's not available while our page is rendered on the server-side.
